<!DOCTYPE html>
<html>

<head>
    <!--更多资源：https://gitee.com/iGaoWei/big-data-view -->
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="refresh" content="60">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--大屏-->
    <link type="text/css" href="css/public.css" rel="stylesheet">
    <link type="text/css" href="css/icon.css" rel="stylesheet">
    <link type="text/css" href="css/index.css" rel="stylesheet">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 768 * 100 + 'px';
    </script>
    <script src="js/echarts.min.js"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <style>        body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Arial, sans-serif;
    }

    .container {
        display: flex;
        height: 100vh; /* 假设容器高度为视口高度 */
    }

    .left-column {
        width: 60%;
        display: flex;
        flex-direction: column;
    }

    .right-column {
        width: 40%;
    }

    .chart-container {
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        padding: 0.5rem;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        color: #333;
    }

    .bar-chart {
        background-color: #f0f0f0;
    }

    .line-chart {
        background-color: #e0e0e0;
    }

    .pie-chart {
        height: 100%; /* 饼图的高度等于左侧两个图表的高度之和 */
        background-color: #d0d0d0;
    }
    </style>
</head>

<body>
<div class="bg">
    <div class="title">学生信息管理数据智慧大屏</div>

    <div class="container">
        <div class="left-column">
            <div class="chart-container bar-chart">
<!--                <div class="leftMain_middle_left" style="width: 50%;">-->
<!--                    <div class="leftMain_middle_leftIn">-->
                        <h3>学生班级分布</h3>
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div class="biaoge" style="width: 100%; height: 25vh" id="chartmain"></div>
                        <script type="text/javascript">
                            $(document).ready(function () {
                                let data = [];
                                $.ajax({
                                    url: "/getCLassData",
                                    type: "post",
                                    dataType: "json",
                                    async: false,
                                    success: function (d) {
                                        data = d;
                                    }
                                })
                                //指定图表的配置项和数据
                                var dataAxis = data.name;
                                var yMax = 500;
                                var dataShadow = [];

                                for (var i = 0; i < data.length; i++) {
                                    dataShadow.push(yMax);
                                }

                                option = {
                                    title: {
                                        text: '',
                                        subtext: ''
                                    },
                                    grid: {
                                        x: 40,
                                        y: 40,
                                        x2: 20,
                                        y2: 20,

                                    },
                                    xAxis: {
                                        data: dataAxis,
                                        axisLabel: {
                                            /*inside: true,*/
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12

                                            }
                                        },
                                        axisTick: {
                                            show: false,
                                        },
                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        z: 10
                                    },
                                    yAxis: {
                                        type: 'value',
                                        name: '单位：人',
                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        axisLabel: {
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12
                                            }
                                        }
                                    },

                                    dataZoom: [
                                        {
                                            type: 'inside'
                                        }
                                    ],
                                    series: [
                                        { // For shadow
                                            type: 'bar',
                                            itemStyle: {
                                                color: 'rgba(0,0,0,0.05)'
                                            },
                                            barGap: '-100%',
                                            barCategoryGap: '40%',
                                            data: dataShadow,
                                            animation: false
                                        },
                                        {
                                            type: 'bar',
                                            itemStyle: {
                                                color: new echarts.graphic.LinearGradient(
                                                    0, 0, 0, 1,
                                                    [
                                                        { offset: 0, color: '#0efdff' },
                                                        { offset: 0.5, color: '#188df0' },
                                                        { offset: 1, color: '#188df0' }
                                                    ]
                                                )
                                            },
                                            emphasis: {
                                                itemStyle: {
                                                    color: new echarts.graphic.LinearGradient(
                                                        0, 0, 0, 1,
                                                        [
                                                            { offset: 0, color: '#2378f7' },
                                                            { offset: 0.7, color: '#2378f7' },
                                                            { offset: 1, color: '#0efdff' }
                                                        ]
                                                    )
                                                }
                                            },
                                            data: data.value
                                        }
                                    ]
                                };
                                //获取dom容器
                                var myChart = echarts.init(document.getElementById('chartmain'));
                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            });
                        </script>
<!--                        <span class="border_bg_leftTop"></span>-->
<!--                        <span class="border_bg_rightTop"></span>-->
<!--                        <span class="border_bg_leftBottom"></span>-->
<!--                        <span class="border_bg_rightBottom"></span>-->
                    </div>
                </div>
            </div>
            <div class="chart-container line-chart">
<!--                <div class="leftMain_middle_right" style="width: 50%;">-->
<!--                    <div class="leftMain_middle_rightIn">-->
                        <h3>学生宿舍分布</h3>
                        <div class="biaoge" style="width: 100%; height: 25vh" id="ci"></div>
                        <script type="text/javascript">
                            $(document).ready(function () {
                                let data = [];
                                $.ajax({
                                    url: "/getHotelData",
                                    type: "post",
                                    dataType: "json",
                                    async: false,
                                    success: function (d) {
                                        data = d;
                                    }
                                })

                                option = {
                                    title: {
                                        text: ''
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        textStyle: {
                                            color: '#fff',
                                            fontSize: 12,
                                        },
                                        right: '10%',
                                        data: '折线一'
                                    },
                                    grid: {
                                        x: 40,
                                        y: 40,
                                    },
                                    toolbox: {
                                        feature: {
                                            //saveAsImage: {}
                                        }
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        axisLabel: {
                                            /*inside: true,*/
                                            interval: 0,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12

                                            }
                                        },
                                        axisTick: {
                                            show: false,
                                        },
                                    },
                                    yAxis: {
                                        type: 'value',

                                        axisLine: {
                                            show: true,
                                            symbol: ['none', 'arrow'],
                                            symbolOffset: 12,
                                            lineStyle: {
                                                color: '#fff',
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        axisLabel: {
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12
                                            }
                                        }
                                    },
                                    series: [
                                        {
                                            name: '折线一',
                                            type: 'line',
                                            stack: '总量',
                                            data: data.value,
                                            itemStyle: {
                                                normal: {
                                                    color: "#0efdff", //折线点的颜色
                                                    lineStyle: {
                                                        color: "#0efdff", //折线的颜色
                                                        width: 2,
                                                    }
                                                },
                                            }
                                        },
                                    ]
                                };
                                //获取dom容器
                                var myChart = echarts.init(document.getElementById('ci'));
                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            });
                        </script>
<!--                        <span class="border_bg_leftTop"></span>-->
<!--                        <span class="border_bg_rightTop"></span>-->
<!--                        <span class="border_bg_leftBottom"></span>-->
<!--                        <span class="border_bg_rightBottom"></span>-->
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="right-column">
            <div class="chart-container pie-chart">
<!--                <div class="rightMain40" style="width: 40%;">-->
<!--                    <div class="rightMain_top">-->
<!--                        <div class="rightMain_topIn">-->
                            <h3>学生地区分布</h3>
                            <div class="biaoge" style="width: 40%; height: 60vh" id="chartmain_bing"></div>
                            <script type="text/javascript">
                                $(document).ready(function () {
                                    let data = [];
                                    $.ajax({
                                        url: "/getAddressData",
                                        type: "post",
                                        dataType: "json",
                                        async: false,
                                        success: function (d) {
                                            data = d;
                                        }
                                    })

                                    option = {
                                        title: {
                                            text: '学生地区分布',
                                            subtext: '',
                                            left: 'right',
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12
                                            }
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                                        },
                                        legend: {
                                            type: 'scroll',
                                            orient: 'vertical',
                                            right: 10,
                                            top: 40,
                                            bottom: 20,
                                            left: 'right',
                                            data: data.name,
                                            textStyle: {
                                                color: '#fff',
                                                fontSize: 12
                                            }

                                        },
                                        grid: {
                                            x: '-10%',
                                            y: 40,
                                            x2: 20,
                                            y2: 20,
                                        },
                                        // color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
                                        color: ['#ff0000', '#ffa500', '#ffff00', '#00ff00', '#008000'],

                                        series: [
                                            {
                                                type: 'pie',
                                                radius: '65%',
                                                center: ['50%', '50%'],
                                                selectedMode: 'single',
                                                data: [
                                                    //通过循环把data数组里的数据一个一个拿到，
                                                    { name: data.name[0], value: data.value[0] },
                                                    { name: data.name[1], value: data.value[1] },
                                                    { name: data.name[2], value: data.value[2] },
                                                    { name: data.name[3], value: data.value[3] },
                                                    { name: data.name[4], value: data.value[4] },

                                                ],
                                                emphasis: {
                                                    itemStyle: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                }
                                            }
                                        ]
                                    };
                                    //获取dom容器
                                    var myChart = echarts.init(document.getElementById('chartmain_bing'));
                                    // 使用刚指定的配置项和数据显示图表。
                                    myChart.setOption(option);
                                });

                            </script>
<!--                            <span class="border_bg_leftTop"></span>-->
<!--                            <span class="border_bg_rightTop"></span>-->
<!--                            <span class="border_bg_leftBottom"></span>-->
<!--                            <span class="border_bg_rightBottom"></span>-->
                        </div>
                    </div>
                </div>
                <div style="clear:both;"></div>
            </div>
            </div>
        </div>
    </div>
<!--大屏-->
<!--数字增长累加动画-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>